<template>
  <view class="login">
    <view class="logon">
      <image src="@/static/logo.png" />
      <text id="titleb">象虹英语</text>
      <text id="titles">笔落定乾坤，书开跃龙门</text>
    </view>
    <view class="login-button">
      <view class="login-not">
        <button open-type="getPhoneNumber" @getphonenumber="getphonenumber">一键登录
        </button>
        <button @click="goIndex">暂不登录
        </button>
      </view>
      <view class="agree">
        <checkbox-group @change="agreeTheMent">
          <checkbox value="true">
          </checkbox>
        </checkbox-group>
        <view class="agreetext">
          我已阅读并同意
          <navigator open-type="navigate" url="/pages/login/agreement/agreement">
            《会员服务协议》
          </navigator>
          、
          <navigator open-type="navigate" url="/pages/login/agreement/agreement">《小程序隐私政策》 </navigator>
        </view>

      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import * as http from '../../utils/http'
  import generateShortUniqueId from '../../utils/uuid';
  import {
    useUserInfo
  } from "@/stores/userinfo.js";
  const userInfo = useUserInfo()

  //是否同意
  const isAgree = ref(false)

  function agreeTheMent(e) {
    isAgree.value = e.detail.value[0]
    // console.log(isAgree.value);
  }

  //手机号一键登录
  async function getphonenumber(e) {
    console.log(e);
    if (!e.detail.code) {
      //没有授权手机号
      uni.showModal({
        title: '提示',
        content: '您决绝了手机号授权',
        showCancel: false
      });
      return
    }

    if (isAgree.value) {
      //登录获取登录授权码
      let loginData = {
        "phoneCode": null,
        "loginCode": null,
        "state": generateShortUniqueId()
      }

      loginData.phoneCode = e.detail.code
      let loginRes = null
      try {
        //获取登陆信息
        loginRes = await new Promise((resolve, reject) => {
          uni.login({
            provider: 'weixin',
            success: resolve,
            fail: reject
          });
        });
      } catch (err) {
        console.error('login fail:', err);
      }
      // console.log(loginRes);
      loginData.loginCode = loginRes.code
      const loginResult = await http.postRequest("/member/auth/weixin-mini-app-login", loginData)
      console.log(loginResult);
      if (loginResult.code == 0) {
        //存储登录信息
        uni.setStorageSync("loginData", loginResult.data)
        userInfo.loginData.accessToken = loginResult.data.accessToken
        userInfo.loginData.refreshToken = loginResult.data.refreshToken
        userInfo.loginData.userId = loginResult.data.userId
        userInfo.loginData.openid = loginResult.data.openid
        //获取用户信息
        const baseInfoResult = await http.getRequest("/member/user/get")
        uni.setStorageSync("baseInfo", baseInfoResult.data)
        userInfo.baseInfo.avatar = baseInfoResult.data.avatar
        userInfo.baseInfo.nickname = baseInfoResult.data.nickname
        userInfo.baseInfo.mobile = baseInfoResult.data.mobile
        userInfo.baseInfo.sex = baseInfoResult.data.sex
        //跳转到首页
        uni.reLaunch({
          url: '/pages/index/index',
          success: () => {
            uni.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 2000
            });
          }
        })
      }
    } else {
      //如果没勾选先让投选
      uni.showModal({
        title: '提示',
        content: '请您确认已完成阅读会员协议和隐私政策，并勾选同意',
        showCancel: false
      });
    }
  }

  function goIndex() {
    uni.reLaunch({
      url: '/pages/index/index'
    });
  }
</script>

<style lang="scss" scoped>
  .login {
    height: 100vh;
    background-color: #2abbaf;

    .logon {
      position: absolute;
      left: 220rpx;
      top: 300rpx;
      text-align: center;

      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 100rpx;
      }

      #titleb {
        display: block;
        font-size: 45rpx;
        font-weight: bold;
        color: #fff;
        // padding-left: 20rpx;
        letter-spacing: 10rpx;
      }

      #titles {
        margin-top: 5rpx;
        display: block;
        font-size: 28rpx;
        color: #fff;
        padding-left: 10rpx;
        letter-spacing: 2rpx;
      }
    }
  }

  .login-button {
    position: absolute;
    left: 24rpx;
    bottom: 400rpx;
    width: 700rpx;

    .login-not {
      display: flex;

      button {
        color: #2abbaf;
        background-color: #fff;
        border-radius: 60rpx;
        width: 300rpx;
      }


    }

    .agree {
      margin-top: 100rpx;
      font-size: 25rpx;
      color: #e8e7e3;
      display: flex;
      vertical-align: middle;

      .agreetext {
        navigator {
          color: #ffffff;
          font-weight: 500;
          display: inline;
          text-decoration: underline;
        }
      }

    }
  }
</style>